

<div class="layui-form" id="form">
	<div class="form-cont">
		<div class="layui-form-item verify">
		  <label class="layui-form-label">任务名称</label>
		  <div class="layui-input-block">
			  <input type="text" verify="requirel5" autocomplete="off" v-model="detail.task_name" placeholder="请输入任务名称" class="layui-input">
			  <span class="hint">任务名称必填</span>
			</div>
		</div>
		<div class="layui-form-item verify">
		  <label class="layui-form-label">类型</label>
		  <div class="layui-input-block">
		      <div class="layui-unselect layui-form-select">
		      	<div class="layui-select-title"><input type="text" name='type' :data='detail.type' verify="require" placeholder="请选择类型" class="layui-input layui-unselect" readonly><i
		      		 class="layui-edge"></i></div>
		      	<dl class="layui-anim layui-anim-upbit">
		      		<dd class="layui-select-tips layui-this">请选择</dd>
		      		<dd :data='index+1' v-for="(x,index) in types" @click="typesF(index)">{{x}}</dd>
		      	</dl>
		      </div>
			  <span class="hint">类型必选</span>
		  </div>
		</div>
		<div class="layui-form-item verify" v-if="detail.type==2">
		  <label class="layui-form-label">设备组</label>
		  <div class="layui-input-block hxr-select" @click="choose">
			  <input type="text" :verify="detail.type==2?'require':''" v-model="detail.device_group_names" placeholder="请选择设备组" class="layui-input" readonly>
			  <i class="layui-icon layui-icon-right"></i>
			  <span class="hint" v-if="detail.type==2">设备组必选</span>
			</div>
		</div>
		<div class="layui-form-item verify" v-if="detail.type==3">
		  <label class="layui-form-label">设备</label>
		  <div class="layui-input-block hxr-select" @click="choose2">
			  <input type="text" :verify="detail.type==3?'require':''" v-model="detail.device_names" placeholder="请选择设备" class="layui-input" readonly>
			  <i class="layui-icon layui-icon-right"></i>
			  <span class="hint" v-if="detail.type==3">设备必选</span>
			</div>
		</div>
		<div class="layui-form-item verify">
		  <label class="layui-form-label">文件上传</label>
		  <div class="layui-input-block">
			  <button type="button" class="layui-btn" id="upload" v-show="!zip_name&&!detail.zip_name">
			    <i class="layui-icon">&#xe67c;</i>上传文件
			  </button>
			  <div class="flex img-box" v-if="zip_name||detail.zip_name">
				  <span @click="zip_name='',detail.zip_name=''">x</span>
				  <template v-if="zip_name">
					  {{zip_name}}
				  </template>
				  <template v-else-if="detail.zip_name">
				  		<a :download="detail.file_name" :href="url+detail.zip_name" class="layui-btn layui-btn-normal layui-btn-xs">下载</a>
				  </template>
			  </div>
			  <input type="hidden" verify="require" v-model="zip_name" v-if="!detail.zip_name"/>
			  <span class="hint" v-if="!zip_name">文件必传</span>
		  </div>
		</div>
		<div class="layui-form-item verify">
		  <label class="layui-form-label">执行程序</label>
		  <div class="layui-input-block">
			  <input type="text" v-model="detail.file_name" verify="require" placeholder="请输入文件名称" class="layui-input">
			  <span class="hint">文件名称必填</span>
			</div>
		</div>
		<div class="layui-form-item verify">
		  <label class="layui-form-label">文件大小</label>
		  <div class="layui-input-block">
			  <input type="text" v-model="detail.file_size" verify="require" placeholder="请输入文件大小" class="layui-input" disabled>
			  <span class="hint">文件大小必填</span>
			</div>
		</div>
		<div class="layui-form-item verify">
		  <label class="layui-form-label">解压目录</label>
		  <div class="layui-input-block">
			  <input type="text" v-model="detail.unzip_file" verify="require" placeholder="请输入解压目录" class="layui-input">
			  <span class="hint">解压目录必填</span>
			</div>
		</div>
		<div class="layui-form-item verify">
		  <label class="layui-form-label">执行时间</label>
		  <div class="layui-input-block">
			  <input type="number" v-model="detail.execution_time" verify="require" placeholder="请输入执行时间(秒)" class="layui-input">
			  <span class="hint">执行时间必填</span>
			</div>
		</div>
		<div class="layui-form-item verify">
			<label class="layui-form-label">执行参数</label>
			<div class="layui-input-block">
				<input type="text" v-model="detail.additional" placeholder="请输入执行参数" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
		  <label class="layui-form-label">备注</label>
		  <div class="layui-input-block">
		      <textarea type="text" class="layui-textarea" v-model="detail.remarks"></textarea>
		  </div>
		</div>
		<div class="layui-form-item">
		  <label class="layui-form-label">状态</label>
		  <div class="layui-input-block">
		      <div class="layui-unselect layui-form-switch" :class="{'layui-form-onswitch':detail.status==1}" lay-skin="_switch" @click="radioF()"><em>{{detail.status==1?'启用':'停用'}}</em><i></i></div>
		  </div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">守护进程</label>
			<div class="layui-input-block">
				<div class="layui-unselect layui-form-switch" :class="{'layui-form-onswitch':detail.protect==1}" lay-skin="_switch" @click="radioF1()"><em>{{detail.protect==1?'启用':'不启用'}}</em><i></i></div>
			</div>
		</div>
	</div>
	  <div class="form-btn" v-if="type!=3">
	      <input type="button" value="保存" class="layui-btn" @click="submit">
	  </div>
</div>
<style type="text/css">
	.img-box{
		width: 60px;
		height: 60px;
		border: 1px solid #eee;
		position: relative;
	}
	.img-box img{
		max-width: 100%;
		max-height: 100%;
	}
	.img-box span{
		position: absolute;
		width: 15px;
		line-height: 15px;
		text-align: center;
		font-family: arial;
		top: -8px;
		right: -8px;
		border-radius: 50%;
		background: rgba(0,0,0,.5);
		color:#fff;
		font-size: 12px;
		cursor: pointer;
	}
	.form-cont{
		overflow: auto;
	}
</style>
<script>
	layui.use(['form','upload'], function(){
	  var $ = layui.$
	  ,form = layui.form,upload=layui.upload;
	  form.verify(layui.admin.verify);
	  var forms=new Vue({
	  		el:'#form',
	  		data:{
	  			types:['所有','设备组','设备'],
				group:[],
				type:layui.admin.objData.type,
				url:layui.conf.url,
				detail:{
					status:1,
					protect:0,
					type:0,
					zip_name:'',
					device_group_names:'',
					device_names:'',
					additional:''
				},
				old_detail:{},
				type_name:'',
				upload:'',
				layer:'',
				photos:false,
				zip_name:''
	  		},
	  		mounted() {
				var _this=this;
				//初始化
	  			if(this.type!=1) this.detail=layui.admin.objData.detail,this.old_detail=JSON.stringify(layui.admin.objData.detail);
				layui.admin.task=this.detail;
				$('input[name="type"]').val(this.types[this.detail.type-1]);
				//身份证上传
				  this.upload=upload.render({
				    elem: '#upload' ,//绑定元素
					field:'image',
					accept:'file',
					exts: 'zip|rar|7z',
					data:{type:2},
					auto:false,
				    url: layui.conf.ajaxUrl+'login/upload_img'
					//,data:{module:'notice',folder:'/cat/logo'}
					,choose: function(obj){
					    obj.preview(function(index, file, result){
						  _this.zip_name=file.name;
						//  _this.detail.file_name=file.name.substring(0,file.name.indexOf('.'));
						  _this.detail.file_size=file.size;
						  _this.photos=true;
					    });
					  }
				    ,done: function(res){
					  _this.detail.zip_name=res.data.img_url;
					  layer.close(_this.layer);
					  _this.submits();
				    }
				    ,error: function(){}
				  });
	  		},
	  		methods:{
	  			radioF:function(){//radio选择
	  				this.detail.status==1?this.detail.status=2:this.detail.status=1;
	  			},
				radioF1:function(){//radio选择
					this.detail.protect==1?this.detail.protect=2:this.detail.protect=1;
				},
				choose:function(){
					layui.admin.pups=layer.open({
						type:1,
					   id:'pup-conts',
					   title: '选择设备组',
					   btn:[],
					   area: ['800px','600px'],
					   success:	 function(layero, index){
						$('#pup-conts').load(layui.conf.views+'device_group/select.html?v='+layui.cache.version);
					   }
					})
				},
				choose2:function(){
					layui.admin.pups=layer.open({
						type:1,
					   id:'pup-conts2',
					   title: '选择设备',
					   btn:[],
					   area: ['800px','600px'],
					   success:	 function(layero, index){
						$('#pup-conts2').load(layui.conf.views+'device/select.html?v='+layui.cache.version);
					   }
					})
				},
				submit:function(){
					if(layui.admin.form('#form')){
						if(this.photos){
							this.layer=layer.load(1);
							this.upload.upload();
						}else{
							this.submits();
						}
					}
				},
				submits:function(){
					if(this.type==2){   //编辑
						var data=layui.admin.filter(this.detail,JSON.parse(this.old_detail),'task_id');
						if(data.type==undefined){
							if(data.device_group_ids!=undefined || data.device_ids!=undefined){
								data.type=JSON.parse(this.old_detail).type;
							}
						}
						if(data){
							layui.admin.formapi('device/task_update',data);
						}
					}else{  //添加
						layui.admin.formapi('device/task_add',this.detail);
					}
				},
				typesF:function(index){
					this.detail.type=index+1;
				}
	  		}
	  	})
	});
</script>
